<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="fr">
<head>
  <title>D&eacute;buter avec HTML + CSS</title>
  <link href="../../threepart-f.css" rel="stylesheet" type="text/css">
  <style type="text/css">
  @media screen, print, projection, handheld {
    .hide {display: none !important}
  }
  object {border: thin dotted; width: 35em; height: 30em}
  div.figure p {
      text-align: center;
      font-style: italic;
      font-size: smaller;
      text-indent: 0 }
  div.figure img, div.figure object {max-width: 90%}
  pre {margin: 1em 0; background: #DDD; padding: 0.5em 1.5em}
  pre strong {color: red}
  img.illustration {float: right; margin: 0.5em 0 0.5em 0.5em}
  img.sign {float: left; max-width: 4.5em; margin: 0 0.5em 0.5em -5em}
  div.advanced {margin: 1em 0 1em 5em; font-size: smaller}
  abbr {speak: spell-out}
  div.advanced {cue: url(ting.mp3) url(tingting.mp3)}
</style>

<link rel=home title="W3C" href="/">
<link rel=top title="CSS" href="../../CSS/">
<link rel=index title="Site&nbsp;index" href="../../../Help/siteindex">
<link rel=search title="Search" href="http://search.w3.org/">
<link rel=copyright title="Copyright" href="../../../Consortium/Legal/ipr-notice.html#Copyright">

<link rel=alternate hreflang=de title="Deutsch" href="http://www.wss-expert.de/Style/Examples/011/firstcss/">
<link rel=alternate hreflang=en title="English" href="firstcss.en.html">
<link rel=alternate hreflang=es title="Español" href="firstcss.es.html">
<link rel=alternate hreflang=fr title="Français" href="firstcss.fr.html">
<link rel=alternate hreflang=id title="Bahasa Indonesia" href="http://www.erasparsa.com/w3/Style/Examples/011/firstcss.id.html">
<link rel=alternate hreflang=it title="Italiano" href="http://www.osservatoriosullacomunicazione.com/w3c/firstcss.html">
<link rel=alternate hreflang=nl title="Nederlands" href="firstcss.nl.html">
<link rel=alternate hreflang=pl title="Polski" href="http://www.tlumaczenia-angielski.info/w3c/css/css-beginner/firstcss.pl.html">
<link rel=alternate hreflang=pt title="Português (Brasileiro)" href="http://www.maujor.com/w3ctuto/firstcss.html">
<link rel=alternate hreflang=ru title="Русский" href="http://inlinecom.ru/w3c/firstcss/firstcss.htm">
<link rel=alternate hreflang=sr title="Српски" href="http://www.cincplug.com/W3C/Tutorials/firstcss.htm">
<link rel=alternate hreflang=th title="ไทย" href="firstcss.th.html">


<p class=translations>(<a title="A propos des traductions" href="/Style/translating">Langues:</a>
<a rel=alternate hreflang=de href="http://www.wss-expert.de/Style/Examples/011/firstcss/"><abbr title="Deutsch">de</abbr></a>
<a rel=alternate hreflang=en href="firstcss.en.html"><abbr title="English">en</abbr></a>
<a rel=alternate hreflang=es href="firstcss.es.html"><abbr title="Español">es</abbr></a>
<a rel=alternate hreflang=fr href="firstcss.fr.html"><abbr title="Français">fr</abbr></a>
<a rel=alternate hreflang=id href="http://www.erasparsa.com/w3/Style/Examples/011/firstcss.id.html"><abbr title="Bahasa Indonesia">id</abbr></a>
<a rel=alternate hreflang=it href="http://www.osservatoriosullacomunicazione.com/w3c/firstcss.html"><abbr title="Italiano">it</abbr></a>
<a rel=alternate hreflang=nl href="firstcss.nl.html"><abbr title="Nederlands">nl</abbr></a>
<a rel=alternate hreflang=pl href="http://www.tlumaczenia-angielski.info/w3c/css/css-beginner/firstcss.pl.html"><abbr title="Polski">pl</abbr></a>
<a rel=alternate hreflang=pt href="http://www.maujor.com/w3ctuto/firstcss.html"><abbr title="Português (Brasileiro)">pt</abbr></a>
<a rel=alternate hreflang=ru href="http://inlinecom.ru/w3c/firstcss/firstcss.htm"><abbr title="Русский">ru</abbr></a>
<a rel=alternate hreflang=sr href="http://www.cincplug.com/W3C/Tutorials/firstcss.htm"><abbr title="Српски">sr</abbr></a>
<a rel=alternate hreflang=th href="firstcss.th.html"><abbr title="ไทย">th</abbr></a>)

<h1>Tutoriel CSS<br>
d&eacute;buter avec HTML + CSS</h1>

<div class="map">
<h2 class="hide">Contenu</h2>
<ul>
  <li id="p1"><a href="#HTML">1. Le langage HTML</a></li>
  <li id="p2"><a href="#couleurs">2. Ajouter de la couleur</a></li>
  <li id="p3"><a href="#fontes">3. Ajouter des fontes</a></li>
  <li id="p4"><a href="#navbar">4. La barre de navigation</a></li>
  <li id="p10"><a href="#liens">5. Stylisez vos liens</a></li>
  <li id="p6"><a href="#ligne">6. Ligne horizontale</a></li>
  <li id="p9"><a href="#externe">7. CSS externe</a></li>
  <li id="p5"><a href="#savoir">En savoir plus</a></li>
</ul>
</div>

<p>Ce court tutoriel est destin&eacute; &agrave;&nbsp; ceux qui commencent
&agrave;&nbsp; utiliser CSS et n'ont jamais &eacute;crit de feuille de style
CSS.</p>

<p>Il n'explique pas CSS en profondeur. Il explique comment cr&eacute;er un
fichier HTML, un fichier CSS et comment les faire fonctionner ensemble.
Apr&egrave;s cela, vous pourrez lire d'<a href="#reading">autres
tutoriels</a> afin d'ajouter plus de caract&eacute;ristiques &agrave;&nbsp;
vos fichiers HTML et CSS. Ou bien vous pouvez utiliser un <a
href="../../CSS/#editors" hreflang="en">&eacute;diteur HTML ou CSS</a> afin
de mettre en place des sites complexes.</p>

<p>A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble
&agrave;&nbsp; cela:</p>

<div class="figure">
<p><object type="text/html" data="mapage.html">
  <p><a href="mapage.html">[Lien vers la page HTML finale]</a></p>
</object></p>

<p>Page HTML r&eacute;sultante, couleurs et disposition effectu&eacute;es
avec CSS.</p>
</div>

<p>Notez que je ne pr&eacute;tends pas que c'est joli :)</p>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png"> Voici un exemple de section <em>optionelle</em>. Elles
contiennent des explications suppl&eacute;mentaires du langage HTML etTML et
du code CSS des exemples. L'icone "alerte!" qui les pr&eacute;c&egrave;de
indique que la section contient des informations plus avanc&eacute;ees que le
reste.</p>
</div>

<div class="section" id="HTML">
<h2>Etape 1: Le langage HTML</h2>

<p>Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme
Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). Une fois que vous aurez
int&eacute;gr&eacute; ces principes, vous pourrez facilementement utiliser
des outils plus avanc&eacute;s, ou des logiciels commerciaux tels que Style
Master, Dreamweaver ou GoLive. Cependant pour votre premi&egrave;re feuille
de style CSS, il vaut mieux que vous ne soyiez pas distrait par de nombreuses
caract&eacute;ristiques avanc&eacute;es.</p>

<p>N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word
ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait
pas lire. Pour HTML et CSS, nous voulons de simples fichiers texte.</p>

<p>L'&eacute;tape&nbsp;1 est d'ouvrir votre &eacute;diteur de texte (Notepad,
TextEdit, KEdit, etc., quel que soit votre &eacute;diteur favori), de
commencer avec une fen&ecirc;tre vide et de taper ceci:</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;!-- Menu de navigation du site --&gt;
&lt;ul class="navbar"&gt;
  &lt;li&gt;&lt;a href="index.html"&gt;Home page&lt;/a&gt;
  &lt;li&gt;&lt;a href="reflexions.html"&gt;R&eacute;flexions&lt;/a&gt;
  &lt;li&gt;&lt;a href="ville.html"&gt;Ma ville&lt;/a&gt;
  &lt;li&gt;&lt;a href="liens.html"&gt;Liens&lt;/a&gt;
&lt;/ul&gt;

&lt;!-- Contenu principal --&gt;
&lt;h1&gt;Ma premi&egrave;re page avec du style&lt;/h1&gt;

&lt;p&gt;Bienvenue sur ma page avec du style! 

&lt;p&gt;Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, m&ecirc;me s'ils ne m&egrave;nent nulle part...
&amp;hellip;

&lt;p&gt;Je devrais &eacute;tayer, mais je ne sais comment encore.

&lt;!-- Signer et dater la page, c'est une question de politesse! --&gt;
&lt;address&gt;Fait le 5 avril 2004&lt;br&gt;
  par moi.&lt;/address&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>

<p>En fait, vous n'avez pas &agrave; le taper: vous pouvez le copier et
coller depuis cette page Web dans votre &eacute;diteur.</p>

<p>(Si vous utilisez TextEdit sur Mac, n'oubliez pas de dire &agrave;
TextEdit qu'il s'agit de texte simple; pour ceci, allez au menu Format et
s&eacute;lectionnez "Convertir au format Texte".)</p>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png"> La premi&egrave;re ligne du fichier HTML ci-dessus dit au
navigateur de quel type d'HTML il s'agit (DOCTYPE signifie DOCument TYPE).
Dans ce cas, il s'agit de la version 4.01 d'HTML.</p>

<p>Les mots &agrave; l'int&eacute;rieur de &lt; et &gt; sont nomm&eacute;s
<em>balises</em> et comme vous pouvez le voir, le document est contenu
&agrave; l'int&eacute;rieur des balises &lt;html&gt; et &lt;/html&gt;. Entre
&lt;head&gt; et &lt;/head&gt; se trouve la place pour des informations
vari&eacute;es qui ne sont pas affich&eacute;es &agrave; l'&eacute;cran. A ce
stade, il contient le titre du document, mais plus tard, nous y ajouterons la
feuille de style CSS.</p>

<p>Le &lt;body&gt; est l'emplacement du texte &agrave; proprement parler de
notre document. En principe, tout ce qui s'y trouve sera affich&eacute;,
&agrave; l'exception du texte contenu entre entre &lt;!-- et --&gt;, qui sert
de commentaire pour nous-m&ecirc;me. Le navigateur ignorera ce texte.</p>

<p>Parmi les balises de l'exemple, &lt;ul&gt; introduit une "Liste non
ordonn&eacute;e", c'est &agrave; dire une liste dans laquelle les
&eacute;l&eacute;ments ne sont pas num&eacute;rot&eacute;s. La balise
&lt;li&gt; est le d&eacute;but d'un "&eacute;l&eacute;ment de liste ". Le
&lt;p&gt; est un "paragraphe". Et le &lt;a&gt; est une "ancre", ce qui
cr&eacute;e un hyperlien.</p>
</div>

<div class="figure">
<p><img alt="le code source HTML affich&eacute; par Subethaedit"
src="capture.png"></p>

<p>L'&eacute;diteur Subethaedit affichant le code source HTML.</p>
</div>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png"> Si vous d&eacute;sirez conna&icirc;tre la signification du
contenu d'un &lt;&hellip;&gt;, je vous recommande de commencer avec <a
href="../../../MarkUp/Guide/" hreflang="en"><cite>Getting started with
HTML.</cite></a> Mais permettez-moi de vous livrer quelques mots sur la
structure de la page HTML en exemple.</p>
<ul>
  <li>Le "ul" est une liste avec un hyperlien par &eacute;l&eacute;ment. Cela
    nous servira de "menu de navigation de site," nous cr&eacute;erons des
    liens vers les autres pages de notre (hypoth&eacute;tique) site Web. Nous
    pr&eacute;sumons que toutes les pages sur notre site ont un menu
    similaire.</li>
  <li>Les &eacute;l&eacute;ments "h1" et "p" forment le contenu unique de
    cette page, et la signature en bas ("address") sera similaire sur toutes
    les pages du site.</li>
</ul>

<p>Notez que je n'ai pas ferm&eacute; les &eacute;l&eacute;ments "li" et "p".
En langage HTML (mais pas en XHTML), il est permis d'omettre les balises
&lt;/li&gt; et &lt;/p&gt;, ce que j'ai fait l&agrave;, afin de rendre le
texte un peu plus facile &agrave; lire. Mais vous pouvez les ajouter, si vous
pr&eacute;f&eacute;rez.</p>
</div>

<p>Admettons qu'il s'agira d'une page d'un site Web contenant plusieurs pages
similaires. Comme dans beaucoup de pages Web actuelles, celle-ci a un menu
avec des liens vers d'autres pages de notre site hypoth&eacute;tique, un
contenu unique ainsi qu'une signature.</p>

<p>S&eacute;lectionnez maintenanttenant "Sauver-sous&hellip;" depuis votre
menu Fichier, naviguez vers le r&eacute;pertoire/dossier o&ugrave; vous
voulez sauver votre fichier (le Bureau est tout &agrave; fait convenable) et
sauvez le fichier sous le nom "mapage.html". Ne fermez pas l'&eacute;diteur
car nous en aurons encore besoin.</p>

<p>(Si vous utilisez TextEdit sur Mac OS X avant version 10.4, vous voyez une
option pour ne pas ajouter l'extension&nbsp;.txt. Selectionnez cette option,
parce que "mapage.html" a d&eacute;j&agrave; une extension. Les versions plus
r&eacute;centes de TextEdit remarquent l'extension&nbsp;.html
automatiquement.)</p>

<p>Ensuite, ouvrez le fichier dans un navigateur. Vous pouvez faire cela
comme suit: cherchez le fichier avec votre explorateur de fichiers
(Explorateur Windows, Finder ou Konqueror) et cliquez ou double-cliquez sur
le fichier "mapage.html". Il devrait s'ouvrir dans votre navigateur Web par
d&eacute;faut. (Si ce n'est pas le cas, ouvrez votre navigateur et
cliquez-d&eacute;placez le fichier dans le navigateur.)</p>

<p>Comme vous pouvez le voir, la page est assez ennuyeuse&hellip;</p>
</div>

<div class="section" id="couleurs">
<h2>Etape 2: Ajouter de la couleur</h2>

<p>Vous voyez probablement du texte noir sur un fond blanc, mais cela
d&eacute;pend de la fa&ccedil;on dont le navigateur est configur&eacute;. Une
mani&egrave;re simple de rendre la page plus styl&eacute;e et d'y ajouter des
couleurs. (Laissez votre navigateur ouvert, nous l'utiliserons &agrave;
nouveau plus tard.)</p>

<p>Nous allons commencer avec une feuille de style int&eacute;gr&eacute;e
dans le fichier HTML. Par la suite, nous nous mettrons le HTML et le CSS dans
des fichiers s&eacute;par&eacute;s. S&eacute;parer les fichiers est une bonne
chose car cela vous permet facilement d'utiliser la m&ecirc;me feuille de
style sur plusieurs fichiers HTML: il vous suffit d'&eacute;crire votre
feuille de style une fois. Mais pour cette cette &eacute;tape, nous
&eacute;crirons tout dans notre seul fichier.</p>

<p>Nous devons ajouter un &eacute;l&eacute;ment &lt;style&gt; au fichier
HTML. La feuille de style sera dans cet &eacute;l&eacute;ment. Retournez
&agrave; la fen&ecirc;tre de votre &eacute;diteur et ajoutez les cinq lignes
suivantes dans la partie head de votre fichier HTML. Les lignes &agrave;
ajouter sont affich&eacute;es en rouge<span class="hide">(lignes 5 &agrave;
9)</span>.</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
  <strong>&lt;style type="text/css"&gt;
  body {
    color: purple;
    background-color: #d8da3d }
  &lt;/style&gt;</strong>
&lt;/head&gt;

&lt;body&gt;
[etc.]</pre>

<p>La premi&egrave;re ligne indique qu'il s'agit d'une feuille de style et
qu'elle est &eacute;crite en CSS ("text/css"). La seconde ligne indique que
nous ajoutons du style &agrave; l'&eacute;l&eacute;ment "body". La
troisi&egrave;me ligne indique que la couleur du texte sera le violet, et la
ligne suivante que le fond aura comme couleur une sorte de jaune
verd&acirc;tre.</p>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png"> Les feuilles de style en CSS sont constitu&eacute;es de
<em>r&egrave;gles</em>. Chacune des r&egrave;gles est en trois partie:</p>
<ol>
  <li>Le <em>s&eacute;lecteur</em> (dans l'exemple: "body"), qui indique au
    navigateur quelle partie du document est affect&eacute;e par la
    r&egrave;gle;</li>
  <li>La <em>propri&eacute;t&eacute;</em> (dans l'exemple, 'color' et
    'background-color' sont des propri&eacute;t&eacute;s), qui
    sp&eacute;cifie quel aspect de l'affichage est
  param&eacute;tr&eacute;</li>
  <li>Et la <em>valeur</em> ('purple' et '#d8da3d'), qui indique la valeur de
    la propri&eacute;t&eacute; de style.</li>
</ol>

<p>L'exemple montre que les r&egrave;gles peuvent &ecirc;tre
combin&eacute;es. Nous avons param&eacute;tr&eacute; deux
propri&eacute;t&eacute;s, donc nous aurions pu en faire deux r&egrave;gles
s&eacute;par&eacute;es:</p>
<pre>body { color: purple }
body { background-color: #d8da3d }</pre>

<p>mais puisque les deux r&egrave;gles affectent le corps ("body"), nous
avons indiqu&eacute; "body" une seule fois et mis les
propri&eacute;t&eacute;s et valeurs ensemble. Pour en savoir plus sur les
s&eacute;lecteurs, se reporter au <a href="../../LieBos2e/enter/"
hreflang="en">chapitre 2</a> de <cite>Lie &amp; Bos</cite>.</p>
</div>

<p>Le fond de l'&eacute;l&eacute;ment "body" sera &eacute;galement le fond de
tout le document. Nous n'avons pas donn&eacute; aux autres
&eacute;l&eacute;ments (p, li, address&hellip;) de valeur explicite sur le
fond, donc par d&eacute;faut, ils n'en auront pas (ou plut&ocirc;t: ils
seront transparents). La propri&eacute;t&eacute; 'color' d&eacute;termine la
couleur du texte de l'&eacute;l&eacute;ment "body", mais tous les autres
&eacute;l&eacute;ments dans le corps h&eacute;riteront de cette couleur,
&agrave; moins qu'une autre soit sp&eacute;cifi&eacute;e (Nous ajouterons
d'autres couleurs plus plus tard.)</p>

<p>Sauvez maintenant ce fichier (utilisez "Sauver" depuis le menu Fichier) et
retournez &agrave; la fen&ecirc;tre de votre navigateur. Si vous pressez
l'ic&ocirc;ne "Recharger", l'affichage devrait changer de la page "ennuyeuse"
&agrave; une page color&eacute;e (mais certes toujours ennuyeuse) A part la
liste de liens en haut, le texte devrait maintenant &ecirc;tre violet sur un
fond jaune verd&acirc;tre.</p>

<div class="figure">
<p><img alt="Capture d'&eacute;cran de la page color&eacute;e dans Amaya"
src="capture2.png"></p>

<p>Voici comment un navigateur affiche la page maintenant que des couleurs
ont &eacute;t&eacute; ajout&eacute;ees.</p>
</div>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png"> <img src="../../CSS/colors" alt="" class="illustration"> En
CSS, les couleurs peuvent &ecirc;tre sp&eacute;cifi&eacute;es de plusieurs
mani&egrave;res. Cet exemple en montre deux: par nom ("purple") et par code
hexad&eacute;cimal ("#d8da3d"). Il y a &agrave; peu pr&eacute;s 140 noms de
couleurs. Les codes hexad&eacute;cimaux permettent plus de 16 millions de
couleurs. <a href="../../../MarkUp/Guide/Style"><cite>Adding a touch of
style</cite></a> fournit plus d'explications &agrave; propos de ces codes.</p>
</div>
</div>

<div class="section" id="fontes">
<h2>Etape 3: Ajouter des fontes</h2>

<p>Une autre chose simple &agrave; faire est de distinguer les fontes des
diff&eacute;rents &eacute;l&eacute;ments de la page. Choisissons la fonte
"Georgia", sauf pour le texte des titres de type h1 pour lesquels nous
choisirons la fonte "Helvetica."</p>

<p>Sur le Web, vous ne pouvez jamais &ecirc;tre s&ucirc;r des fontes
qu'auront vos lecteurs sur leurs ordinateurs, donc nous ajouterons des
alternatives: si Georgia n'est pas disponible, Times New Roman ou Times iront
tr&egrave;s bien, et si ces deux-la sont &eacute;galement indisponibles, le
navigateur pourra utiliser une autre fonte dans la famille <a
href="http://www.m-w.com/cgi-bin/dictionary?book=Dictionary&amp;va=serif"
hreflang="en">serifs.</a> Si Helvetica est absente, Geneva, Arial et
SunSans-Regular sont assez similaire en forme, et si aucune de celles-ci ne
fonctionne, le navigateur pourra choisir une autre fonte sans serif.</p>

<p>Dans votre &eacute;diteur de texte, ajoutez les lignes suivantes <span
class="hide">(lignes 7-8 et 11-13)</span>:</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
    <strong>font-family: Georgia, "Times New Roman",
          Times, serif;</strong>
    color: purple;
    background-color: #d8da3d }
  <strong>h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }</strong>
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
[etc.]</pre>

<p>Si vous sauvez &agrave; nouveau et pressez "Recharger" dans le navigateur,
vous devriez voir des fontes diff&eacute;rentes pour le titre et le reste du
texte.</p>

<div class="figure">
<p><img alt="Capture d'&eacute;cran avec les fontes ajout&eacute;es"
src="capture3.png"></p>

<p>Maintenant le texte principal a une fonte diff&eacute;rente de celle du
titre.</p>
</div>
</div>

<div class="section" id="navbar">
<h2>Etape 4: La barre de navigation</h2>

<p>La liste en haut de la page HTML est sens&eacute;e devenir un menu de
navigation. Beaucoup de sites Web ont une sorte de menu en haut ou sur le
c&ocirc;t&eacute; de la page, et notre page devrait en avoir un aussi. Nous
le mettrons du c&ocirc;t&eacute; gauche, parce que c'est un peu plus
int&eacute;ressant qu'en haut&hellip;</p>

<p>Le menu est d&eacute;j&agrave; dans la page HTML. Il s'agit de la liste
&lt;ul&gt; en haut. Les liens &agrave; l'int&eacute;rieur ne fonctionnent
pas, puisque notre notre "site Web" consiste en une seule page,
jusqu'&agrave; pr&eacute;sent, donc ceci importe peu. Dans un site Web
r&eacute;el, il ne devrait pas y avoir de lien cass&eacute;,
&eacute;videmment.</p>

<p>Nous devons donc d&eacute;placer la liste &agrave; gauche, et le reste du
texte un petit peu &agrave; droite, pour faire de la place pour notre menu.
Les propri&eacute;t&eacute;s CSS que nous utiliserons pour cela sont
'padding-left' (pour d&eacute;placer le texte du corps) et 'position', 'left'
et 'top' (pour d&eacute;placer le menu).</p>

<p>Il y a d'autres mani&egrave;res de le faire. Si vous recherchez "column"
ou "layout" dans la page <a href="../../CSS/learning"><cite>Learning
CSS</cite></a>, vous trouverez plusieurs mod&egrave;les pr&ecirc;t &agrave;
l'emploi. Mais cette mani&egrave;re convient &agrave; nos besoins.</p>

<p>Dans la fen&ecirc;tre d'&eacute;dition, ajoutez les lignes suivantes au
fichier HTML <span class="hide">(lignes 7 et 12-16)</span>:</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
    <strong>padding-left: 11em;</strong>
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  <strong>ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }</strong>
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
[etc.]</pre>

<p>Si vous sauvez encore et rechargez la page dans votre navigateur, vous
devriez maintenant avoir la liste de liens &agrave; gauche du texte
principal. C'est d&eacute;j&agrave; bien plus int&eacute;ressant, n'est-ce
pas?</p>

<div class="figure">
<p><img alt="Capture d'&eacute;cran avec le menu &agrave; gauche"
src="capture4.png"></p>

<p>Le texte principal a &eacute;t&eacute; d&eacute;plac&eacute; &agrave;
droite et la liste de liens est maintenant &agrave; sa gauche au lieu
d'&ecirc;tre au-dessus.</p>
</div>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png">'position: absolute' pr&eacute;cise que
l'&eacute;l&eacute;ment ul est positionn&eacute; de fa&ccedil;on
ind&eacute;pendante de tout texte qui vient avant ou apr&egrave;s dans le
document, et 'left' et 'top' indiquent quelle est cette position. Dans ce
cas, 2em depuis le haut et 1em depuis le c&ocirc;t&eacute; gauche de cette
fen&ecirc;tre.</p>

<p>'2em' signifie 2 fois la taille de la fonte courante. C'est &agrave; dire
que si le menu est affich&eacute; avec une fonte de 12 points, '2em' font 24
points. L'unit&eacute; 'em' est tr&egrave;s utile en CSS puisqu'elle peut
s'adapter automatiquement &agrave; la fonte que le lecteur utilise. La
plupart des navigateurs ont un menu pour agrandir et r&eacute;duire la taille
de fonte: vous pouvez l'essayer et voir comment la taille du menu augmente
d&egrave;s que la fonte grossit, ce qui n'aurait pas &eacute;t&eacute; le cas
si nous avions utilis&eacute; une taille en pixels &agrave; la place.</p>
</div>
</div>

<div class="section" id="liens">
<h2>Etape 5: Stylisez vos liens</h2>

<p>Le menu de navigation ressemble toujours &agrave; une liste au lieu d'un
menu. Ajoutons un peu de style. Nous allons supprimer les points de la liste
et d&eacute;placer les &eacute;l&eacute;ments &agrave; gauche, &agrave;
l'endroit o&ugrave; &eacute;taient les points. Nous allons aussi donner
&agrave; chaque &eacute;l&eacute;ment son propre fond blanc ainsi qu'un
carr&eacute; noir. (Pourquoi? Aucune raison en particulier, si ce n'est que
l'on peut le faire.)</p>

<p>Nous n'avons pas d&eacute;termin&eacute; quelle couleur auront les liens,
alors nous ajouterons cela &eacute;galement: bleu pour les liens que
l'utilisateur n'a pas encore vu et violet pour les liens d&eacute;j&agrave;
visit&eacute;s <span class="hide">(lignes 13-15 et 23-33)</span>:</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    <strong>list-style-type: none;
    padding: 0;
    margin: 0;</strong>
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  <strong>ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }</strong>
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
[etc.]</pre>

<div class="advanced">
<p><img class="sign" alt="Attention! Explication avanc&eacute;e:"
src="gevaar.png"> Traditionellement, les navigateurs montrent les hyperliens
soulign&eacute;s et en couleurs. Habituellement, les couleurs sont similaires
&agrave; celles que nous avons sp&eacute;cifi&eacute;es ici: bleu pour les
liens vers des pages qui n'ont pas encore &eacute;t&eacute; visit&eacute;es
(ou visit&eacute;es il y a longtemps), violet pour les pages qui ont
&eacute;t&eacute; d&eacute;j&agrave; visit&eacute;es.</p>

<p>En HTML, les hyperliens sont cr&eacute;&eacute;s avec
l'&eacute;l&eacute;ment &lt;a&gt;, donc pour pr&eacute;ciser la couleur, nous
devons ajouter une r&egrave;gle de style pour "a". Afin de
diff&eacute;rencier les liens visit&eacute;s et les liens non visit&eacute;s,
CSS propose deux "pseudo-classes" (:link et :visited). Elles sont
appel&eacute;es "pseudo-classes" pour les distinguer des classes
<em>attributs,</em> qui apparaissent directement dans le HTML, c'est &agrave;
dire, la classe <code>class="navbar"</code> dans notre exemple.</p>
</div>
</div>

<div class="section" id="ligne">
<h2>Etape 6: Ligne horizontale</h2>

<p>L'ajout final &agrave; notre feuille de style est une ligne horizontale
pour s&eacute;parer le texte de la signature en bas. Nous utiliserons
'border-top' afin d'ajouter une ligne en pointill&eacute; au-dessus de
l'&eacute;l&eacute;ment &lt;address&gt; <span class="hide">(lignes
34-37)</span>:</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  <strong>address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }</strong>
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
[etc.]</pre>

<p>Notre style est d&eacute;sormais termin&eacute;. Maintenant, penchons-nous
sur comment faire de notre feuille de style un fichier &agrave; part, de
sorte que d'autres pages peuvent partager le m&ecirc;me style.</p>
</div>

<div class="section" id="externe">
<h2>Etape 7: Mettre la feuille de style dans un fichier &agrave; part</h2>

<p>Nous disponsons d'un fichier HTML avec une feuille de style
int&eacute;gr&eacute;e. Mais si notre site se d&eacute;veloppe, nous voulons
probablement que plusieurs pages partagent le m&ecirc;me style. Il existe une
meilleure m&eacute;thode que de copier la feuille de style dans chaque page:
si nous mettons la feuille de style dans un fichier &agrave; part, toutes les
pages peuvent pointer sur celui-ci.</p>

<p>Pour cr&eacute;er un fichier de feuille de style, nous devons cr&eacute;er
un autre fichier texte vide. Vous pouvez s&eacute;lectionner "Nouveau" depuis
le menu Fichier de votre &eacute;diteur pour obtenir une fen&ecirc;tre vide.
(Si vous utilisez TextEdit, n'oubliez pas de forcer le texte simple &agrave;
nouveau, en utilisant le menu Format.)</p>

<p>Ensuite, coupez et collez le contenu de l'&eacute;l&eacute;ment
&lt;style&gt; depuis le fichier HTML vers la nouvelle fen&ecirc;tre. Ne
copiez pas les &eacute;l&eacute;ments &lt;style&gt; et &lt;/style&gt;. Ils
appartiennent au langage HTML, pas &agrave; CSS. Dans la nouvelle
fen&ecirc;tre d'&eacute;dition, vous devriez maintenant avoir la feuille de
style compl&egrave;te:</p>
<pre>body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }</pre>

<p>Choisissez "Sauver-sous&hellip;" depuis le menu Fichier, assurez-vous que
vous &ecirc;tes dans le m&ecirc;me r&eacute;pertoire/dossier o&ugrave; vous
avez enregistr&eacute; le fichier mapage.html, et sauvez la feuille de style
sous le nom "monstyle.css".</p>

<p>Revenez maintenant &agrave; la fen&ecirc;tre contenant le code HTML.
Supprimez tout depuis la balise &lt;style&gt; jusqu'apr&egrave;s la balise
&lt;/style&gt; et remplacez par l'&eacute;l&eacute;ment &lt;link&gt; comme
suit <span class="hide">(ligne 5)</span>:</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ma premi&egrave;re page avec du style&lt;/title&gt;
  <strong>&lt;link rel="stylesheet" href="monstyle.css"&gt;</strong>
&lt;/head&gt;

&lt;body&gt;
[etc.]</pre>

<p>Ceci indiquera au navigateur que la feuille de style se trouve dans le
fichier nomm&eacute; "monstyle.css" et puisqu'aucun r&eacute;pertoire n'est
mentionn&eacute;, le navigateur regardera dans le m&ecirc;me
r&eacute;pertoire que le fichier HTML.</p>

<p>Si vous sauvez votre fichier HTML et le rechargez dans votre navigateur,
vous ne devriez voir aucun changement: la page a toujours le m&ecirc;me
style, mais celui-ci provient maintenant d'un fichier externe.</p>

<div class="figure">
<p><img alt="R&eacute;sultat final du style" src="capture5.png"></p>

<p>Le r&eacute;sultat final</p>
</div>

<p>L'&eacute;tape suivante est d'enregistrer les deux fichiers mapage.html et
monstyle.css sur votre site Web. (Probablement apr&egrave;s les avoir
modifi&eacute; un peu au pr&eacute;alable&hellip;) Mais cela d&eacute;pend
enti&egrave;ment de votre fournisseur d'acc&egrave;s Internet.</p>

</div>

<div class="section" id="savoir">
<h2>En savoir plus</h2>

<p>Pour une introduction &agrave; CSS, lire le <a
href="../../LieBos2e/enter/" hreflang="en">chapitre 2</a> de <cite>Lie &amp;
Bos</cite>, ou <a href="../../../MarkUp/Guide/Style" hreflang="en"><cite>Dave
Raggett's intro to CSS</cite></a> (Introduction &agrave; CSS par Dave
Raggett).</p>

<p>Vous trouverez d'autres informations, ainsi que d'autres tutoriels
&agrave; la page <a href="../../CSS/learning" hreflang="en">learning CSS</a>
(Apprendre CSS).</p>
</div>

<div class=endmatter>
<div class=banner>
<p>
<a class="home" href="http://www.w3.org/" hreflang="en"><img alt="W3C"
src="http://www.w3.org/Icons/w3c_home"></a> <a
href="../../../Consortium/Activities"
hreflang="en">Activities</a> <a href="../../../TR/"
hreflang="en">Tech.&nbsp;reports</a> <a href="../../../Help/siteindex"
hreflang="en">Site&nbsp;index</a> <a href="../../../Consortium/Translation/"
hreflang="en">Translations</a> <a href="../../../Status"
hreflang="en">Software</a> <a href="http://search.w3.org/"
hreflang="en">Search</a> <em>Nearby:</em> <a href="../../"
hreflang="en">Style</a> <a href="../../CSS/" hreflang="en">CSS</a></p>
</div>

<p class="button"><a href="http://www.w3.org/Style/CSS/Buttons/"
hreflang="en"><img alt="CSS"
src="http://www.w3.org/Style/CSS/Buttons/mwcts"></a> <a
href="http://jigsaw.w3.org/css-validator/" hreflang="fr"><img
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a><a
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"
height="31" width="88"></a></p>

<address>
<img src="../../../People/Bos/bert6.png" alt="">
<a href="../../../People/Bos" hreflang="en">Bert Bos</a>, CSS contact<br>
Created 5 Apr 2004.
Last updated $Date: 2009/10/07 08:18:21 $ GMT 
</address>


<p>Note de traduction: traduction r&eacute;alis&eacute;e par <a
href="mailto:coralie@w3.org">Coralie Mercier</a></p>

<p>Le <a href="http://www.w3.org/Style/Examples/011/firstcss.en.html"
hreflang="en-us">document original</a> du W3C est celui qui fait
r&eacute;f&eacute;rence. La traduction peut contenir des erreurs.</p>
</div>
</body>
</html>
